<template>
  <div class="container">
    <!-- 上部区域 -->
    <div class="top">
      <UserInfoComp></UserInfoComp>
    </div>

    <!-- 左侧区域 -->
    <div class="left">
      <div v-for="d in menus">
        <div @click="toPage(d.path)">
          <img :src="d.icon" alt="" />
          <div>{{ d.title }}</div>
        </div>
      </div>
    </div>

    <!-- 右侧区域 -->
    <div class="right">
      <!-- 在这里添加右侧的内容，例如其他菜单或组件 -->
    </div>

    <!-- 下部区域 -->
    <div class="bottom">
      <!-- 在这里添加底部的内容，例如页脚或状态栏 -->
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 完成所有的单表crud
// 完成所有的数据联动
// 完成所有的连表crud
// 完善软件和软件分类管理
// 完成用户注册功能
import UserInfoComp from '../components/UserInfoComp.vue';

const router = useRouter();



const menus = [
  {
    title: '新闻管理',
    icon: '/images/news.svg',
    path: '/news',
  },
  {
    title: '成语小游戏',
    icon: '/images/idiom.svg',
    path: '/study/idiomgame',
  },
  {
    title: '软件管理',
    icon: '/images/idiom.svg',
    path: '/crud/Software',
  },
  {
    title: '软件分类管理',
    icon: '/images/idiom.svg',
    path: '/crud/SoftwareType',
  },
];

const toPage = (path) => {
  router.push(path);
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}

.top, .bottom {
  width: 100%;
  /* 根据需要设置高度 */
}

.left, .right {
  height: 100%;
  /* 设置左右两侧的宽度，例如50% */
  width: 50%;
}

.right {
  order: 1; /* 让右侧区域显示在左侧区域下方，形成左右布局 */
}
</style>
